<div
	class="flex flex-col w-full max-w-md p-12 space-y-4 text-center"
	[ngClass]="['bg' + contrast, 'text' + defaultInv]"
>
	<h1 class="text-3xl font-semibold">Sign in to your account</h1>
	<a [routerLink]="['/']" class="text-sm" [ngClass]="['text' + plainInv]">
		Or start your free trial
	</a>
	<form class="space-y-4">
		<div class="flex flex-col">
			<label for="email" class="sr-only">Email address</label>
			<input
				class="rounded-t-md"
				[ngClass]="[
					'border' + plain,
					'bg' + contrast,
					'text' + defaultInv,
					'focus:ring' + primary,
					'focus:border' + primary,
					'focus:ring-2'
				]"
				id="email"
				type="email"
				placeholder="Email address"
			/>
			<label for="password" class="sr-only">Password</label>
			<input
				class="-mt-1 rounded-b-md"
				[ngClass]="[
					'border' + plain,
					'bg' + contrast,
					'text' + defaultInv,
					'focus:ring' + primary,
					'focus:border' + primary,
					'focus:ring-2'
				]"
				id="password"
				type="text"
				placeholder="Password"
			/>
		</div>
		<div class="flex justify-between">
			<div class="flex items-center">
				<input
					type="checkbox"
					name="remember"
					id="remember"
					aria-label="Remember me"
					class="mr-1 rounded-sm"
					[ngClass]="[
						'focus:ring' + primary,
						'focus:border' + primary,
						'focus:ring-2',
						'accent' + primary
					]"
				/>
				<label for="remember" class="text-sm" [ngClass]="['text' + plainInv]">
					Remember me
				</label>
			</div>
			<a [routerLink]="['/']" class="text-sm" [ngClass]="['text' + plainInv]">
				Forgot your password?
			</a>
		</div>
		<button
			type="button"
			class="px-8 py-3 space-x-2 font-semibold rounded"
			[ngClass]="['bg' + primary, 'text' + contrast]"
		>
			Sign in
		</button>
	</form>
</div>
